<template>
  <div class="YearCb">
      <!-- 抄见率 -->
       <div id="YearCbmain" style="width: 600px;height:400px;padding:0"></div>
  </div>
</template>

<script>
const echarts = require('echarts')
import {
    CopyTheExample
} from '@/api/baseManage/flMaintain/index'
export default {
    name:'YearCb',
    data(){
        return{
            echarts: '',
            // waterData:[],
            // datas:{
            //     cb:[100,200,105,100,156,200,105,100,156,105,100,156],
            //     cbsum:[491,2035,389,955,347,2035,389,955,347,389,955,347],
            //     cbb:[50,2035,389,955,347,2035,389,955,347,389,955,347]    
            // }
        }
    },
    methods:{
        createEcharts() {
            // 基于准备好的dom，初始化echarts实例
            this.echarts = echarts.init(document.getElementById('YearCbmain'));
            var option = {
                tooltip : {
                    trigger: 'axis',       
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },      
		            // formatter: '{c0}:{c1}'
                },
                legend: {
                    data:[
                        '抄表量',
                        '抄表总量'
                    ]
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
                    },
                    {
                        type : 'category',
                        axisLine: {show:false},
                        axisTick: {show:false},
                        axisLabel: {show:false},
                        splitArea: {show:false},
                        splitLine: {show:false},
                        data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel:{formatter:'{value}'}
                    }
                ],
                series : [
                    {
                        name:'抄表量',
                        type:'bar',
                        itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true,textStyle:{color:'#27727B'}}}},
                        // itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true,textStyle:{color:'#27727B'},formatter:'{c}%'}}},
                        data:[],
                        // data:[100,200,105,100,156,200,105,100,156,105,100,156],
                        label:{
                            normal:{
                                show:true,
                                formatter:'{c}'
                            }
                        }
                    },
                    {
                        name:'抄表总量',
                        type:'bar',
                        xAxisIndex:1,
                        itemStyle: {normal: {color:'rgba(181,195,52,0.5)'}},
                        label:{
                            show:true,
                            position:'top',
                            verticalAlign:'middle',
                            textStyle:{
                                color:'black',
                                fontSize:12
                            }   
                        },
                        // itemStyle: {normal: {color:'rgba(181,195,52,0.5)', label:{show:true}}},
                        data:[]
                        // data:[491,2035,389,955,347,2035,389,955,347,389,955,347]
                    }
                ]
 
            }

            // 使用刚指定的配置项和数据显示图表。
            this.echarts.setOption(option);
        },
        // 获取柱状图水量
        async getCopyExampleData(){
            const res = await CopyTheExample()
            this.TheExampleSum = res.data.a
            // console.log(res.data);
            // console.log(this.waterData,'zongshuiliang ');
            // console.log(this.data,'zongshuiliang ');
            // 总量
            const TheExampleSum = res.data.a
            // 已完成
            const TheExampleDid = res.data.b
            // 百分比
            const TheExampleBai = res.data.c
            console.log(TheExampleSum,TheExampleDid,TheExampleBai,'cesssssss666');      
            this.echarts.setOption({
            })
            this.echarts.setOption({
                tooltip : {
                    trigger: 'axis',       
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    },      
		            formatter(item){
                        // console.log(item[0].dataIndex,111);
                        const index =item[0].dataIndex
                        var res = '已完成' + TheExampleBai[index] + '%'
                        return res
                    }
                },
                legend: {
                    data:[
                        '抄表量',
                        '抄表总量'
                    ]
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
                    },
                    {
                        type : 'category',
                        axisLine: {show:false},
                        axisTick: {show:false},
                        axisLabel: {show:false},
                        splitArea: {show:false},
                        splitLine: {show:false},
                        data : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        axisLabel:{formatter:'{value}'}
                    }
                ],
                series : [
                    {
                        name:'抄表量',
                        type:'bar',
                        itemStyle: {normal: {color:'rgba(7,121,154,1)', label:{show:true,textStyle:{color:'#000000'}}}},
                        // itemStyle: {normal: {color:'rgba(181,195,52,1)', label:{show:true,textStyle:{color:'#27727B'},formatter:'{c}%'}}},
                        data:TheExampleDid,
                    },
                    {
                        name:'抄表总量',
                        type:'bar',
                        xAxisIndex:1,
                        itemStyle: {normal: {color:'rgba(11,154,195,0.5)'}},
                        label:{
                            show:true,
                            position:'top',
                            verticalAlign:'middle',
                            textStyle:{
                                color:'black',
                                fontSize:12
                            }   
                        },
                        // itemStyle: {normal: {color:'rgba(181,195,52,0.5)', label:{show:true}}},
                        data:TheExampleSum
                    }
                ]
 
            })
            
        }
    },
    mounted(){
        this.createEcharts()
        this.getCopyExampleData()
    }
}
</script>

<style>

</style>